<template>
    <el-dialog title="添加人员" :visible.sync="dialog" append-to-body class="addUser-dialog" :before-close="closeDialog">
        <div style="text-align: center">
            <el-transfer
                class="transfer"
                v-model="checkedUser"
                filterable
                :titles="['选择', '已选']"
                :button-texts="['到左边', '到右边']"
                :format="{
                    noChecked: '${total}',
                    hasChecked: '${checked}/${total}'
                }"
                :data="transferData"
                @change="userChange"
            >
                <span slot-scope="{ option }">{{ option.label }}</span>
            </el-transfer>
        </div>
        <div class="footer-btn" v-if="checkedUser.length > 0">
            <el-button type="primary" @click="checkUserLen">确定</el-button>
            <el-button>取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'addUser',
    props: {
        userList: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            dialog: false,
            transferData: [],
            checkedUser: []
        };
    },
    methods: {
        showDialog(checkedUserList) {
            this.dialog = true;
            let userList = this.userList;
            userList.forEach((item) => {
                this.transferData.push({
                    key: item.id,
                    label: item.realname
                });
            });
            this.checkedUser = checkedUserList;
        },
        closeDialog() {
            this.dialog = false;
            this.transferData = [];
            this.checkedUser = [];
        },
        userChange(value) {
            this.checkedUser = value;
        },
        // 不能超过5个
        checkUserLen() {
            let that = this;
            let userList = that.checkedUser;
            if (userList.length > 5) {
                that.$confirm('人员不能超过5个！', '提示', () => {})
                    .then(() => {})
                    .catch(() => {});
                return;
            } else {
                that.closeDialog();
                that.$emit('getCheckedUserList', userList);
            }
        }
    }
};
</script>

<style lang="less">
.addUser-dialog {
    .transfer {
        text-align: left;
        display: inline-block;
    }

    .footer-btn {
        padding: 10px 0;
        text-align: center;
    }
}
</style>